<template>
  <div
    style="
      height: 853px;
      padding-bottom: 37px;
      overflow: auto;
      overflow-x: hidden;
    "
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="myRules">
      <el-form-item label="" prop="camera_number">
        <div style="margin-top: 20px">
          <span class="cameraStyle_bixuan">*</span>
          <span class="cameraStyle">cameraNum<br /></span>
          <!-- <el-form-item label=""> -->
          <el-select
            v-model="ruleForm.camera_number"
            placeholder="请选择"
            style="padding-left: 15px; width: 96.7%; margin-bottom: -30px"
          >
            <el-option
              style="font-size: 20px"
              v-for="(item, index) in cameraList"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
          <!-- </el-form-item> -->
        </div></el-form-item
      >
      <ncform
        :form-schema="formSchema"
        form-name="your-form-name"
        v-model="formSchema.value"
        @submit="submit()"
      ></ncform>
      <el-form-item>
        <div style="text-align: center">
          <el-button @click="submit('ruleForm')">开始测试</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//import { mapState, mapGetters, mapActions } from "vuex";
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      camera_number: "",
      ruleForm: {
        camera_number: "",
      },
      myRules: {
        camera_number: [
          {
            required: true,
            // pattern: "[^ \x22]+",
            message: "请进行选择",
            trigger: "change",
          },
        ],
      },
      formSchema: {
        type: "object",
        properties: {
          // ip: {
          //   type: "string",
          //   // value: "192.168.9.85",
          //   value: this.$store.state.stateIp_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "ip",
          //   },
          // },
          // port: {
          //   type: "number",
          //   // value: "443",
          //   value: this.$store.state.statePort_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "port",
          //   },
          // },
          // user: {
          //   type: "string",
          //   // value: "admin",
          //   value: this.$store.state.stateUser_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "user",
          //   },
          // },
          action: {
            type: "number",
            value: this.$store.state.stateAction_ptzControl,
            ui: {
              columns: 6,
              label: "action",
              widget: "select",
              widgetConfig: {
                enumSource: [
                  {
                    value: 1,
                    label: "1 (向左)",
                  },
                  {
                    value: 2,
                    label: "2 (向右)",
                  },
                  {
                    value: 3,
                    label: "3 (向上)",
                  },
                  {
                    value: 4,
                    label: "4 (向下)",
                  },
                  {
                    value: 5,
                    label: "5 (变倍短)",
                  },
                  {
                    value: 6,
                    label: "6 (变倍长)",
                  },
                  {
                    value: 7,
                    label: "7 (聚焦近)",
                  },
                  {
                    value: 8,
                    label: "8 (聚焦远)",
                  },
                  {
                    value: 9,
                    label: "9(光圈小)",
                  },
                  {
                    value: 10,
                    label: "10 (光圈大)",
                  },
                  {
                    value: 11,
                    label: "11 (灯光关)",
                  },
                  {
                    value: 12,
                    label: "12 (灯光开)",
                  },
                ],
              },
            },
          },
          step: {
            type: "number",
            value: this.$store.state.stateStep_ptzControl,
            ui: {
              columns: 6,
              label: "step",
              widget: "select",
              widgetConfig: {
                enumSource: [
                  {
                    value: 1,
                    label: "1",
                  },
                  {
                    value: 2,
                    label: "2",
                  },
                  {
                    value: 3,
                    label: "3",
                  },
                  {
                    value: 4,
                    label: "4",
                  },
                  {
                    value: 5,
                    label: "5",
                  },
                  {
                    value: 6,
                    label: "6",
                  },
                  {
                    value: 7,
                    label: "7",
                  },
                  {
                    value: 8,
                    label: "8",
                  },
                ],
              },
            },
          },
        },
      },
    };
  },
  props: ["queryType", "company"],
  computed: {
    ...mapState([
      "cameraList",
      "stateAction_ptzControl",
      "stateStep_ptzControl",
    ]),
  },
  methods: {
    ...mapActions(["getQueryInfo_ptzControl"]),
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let sendCompany = this.company;
          let sendParams = {
            // ip: this.formSchema.value.ip,
            // port: this.formSchema.value.port,
            // user: this.formSchema.value.user,
            cameraNum: this.ruleForm.camera_number,
            action: this.formSchema.value.action,
            step: this.formSchema.value.step,
          };
          this.getQueryInfo_ptzControl({ sendCompany, sendParams });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
.cameraStyle {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  /* float: left; */
  line-height: 40px;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box;
  color: #0d285d;
  margin-left: -5px !important;
}
.cameraStyle_bixuan {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  /* float: left; */
  line-height: 40px;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box;
  color: #fa5555;
  margin-left: 15px;
}
</style>
